<template>
  <div>
    <div class="container" v-loading="loading">
      <div>
        <div style="padding-bottom: 10px">
          <el-radio-group v-model="radio">
            <el-radio :label="0">未完成</el-radio>
            <el-radio :label="1">已完成</el-radio>
          </el-radio-group>
        </div>
        <div class="label" v-for="(wfId,index) in wfData.wfId" @click="wanfangId(wfId,index,doctorPaging)">
          <el-tag class="tag" :class="backgroundColor == index ? 'active' : ''">{{wfId}}</el-tag>
        </div>
        <div>
          <page :all="this.wfData.page" :currentPage="currentPage" @returnValue="returnValue"
                style="width: 700px;overflow: inherit;"></page>
          <div class="totalPages">
            <el-input class="input" v-model="value" placeholder="跳转至"></el-input>
            <el-button type="primary" @click="skip">确定</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="container" v-loading="loading1">
      <div>
        <el-button type="primary" @click="accomplish">已全部完成</el-button>
      </div>
      <el-table onselectstart="return false" :data="tableData" border style="width: 100%;margin-top: 20px">
        <el-table-column label="ID" prop="hcoId"></el-table-column>
        <el-table-column label="医院" prop="hospitalName"></el-table-column>
        <el-table-column label="医生">
          <template slot-scope="scope">
            <span v-for="authors in scope.row.authors">{{authors}}、</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row),fillUp = true">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <page :all="doctorAll" :currentPage="doctorPaging" @returnValue="doctorPage"></page>
    </div>
    <!--填补ID-->
    <div>
      <el-dialog :visible.sync="fillUp">
        <div class="hospitalClass">{{hospital}}</div>
        <div class="handle">
          <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input"
                    @keyup.enter.native="search">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="primary" icon="search" @click="search">搜索</el-button>
          <el-button type="warning" icon="search" @click="backfill">回填</el-button>
        </div>
        <div class="fillUpId">
          <el-table :data="tableData1" border style="width: 100%">
            <el-table-column label="ID" prop="hospitalUid"></el-table-column>
            <el-table-column label="hospitalName" prop="hospitalName"></el-table-column>
            <el-table-column label="showName" prop="showName"></el-table-column>
            <el-table-column label="nickName" prop="nickName"></el-table-column>
            <el-table-column label="" width="80">
              <template slot-scope="scope">
                <el-button type="danger" size="small" @click="affirm(scope.$index, scope.row)">确认</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import page from '../element/page';

  export default {
    components: {page},
    data() {
      return {
        /*状态*/
        radio: 0,
        /*万方分页*/
        value: '',
        currentPage: 1,
        /*万方*/
        wfData: {
          wfId: [],
          page: 1,
        },
        /*表格数据*/
        tableData: [],
        backgroundColor: -1,
        wfId: '',
        /*加载*/
        loading: false,
        loading1: false,
        /*填补ID*/
        fillUp: false,
        hospital: '',
        select_word: '',

        tableData1: [],
        /*医生分页*/
        doctorPaging: 1,
        doctorAll: 1,
      }
    },
    created() {
      this.dataGet(this.$com.ZRUrl + '/wanfang_mdm/getWanfangId/' + this.radio + '/' + 1)
    },
    watch: {
      radio() {
        this.backgroundColor = -1;
        this.currentPage = 1;
        this.dataGet(this.$com.ZRUrl + '/wanfang_mdm/getWanfangId/' + this.radio + '/' + 1)
      },
    },
    methods: {
      /*分页*/
      returnValue(data) {
        this.backgroundColor = -1;
        this.currentPage = data;
        this.dataGet(this.$com.ZRUrl + '/wanfang_mdm/getWanfangId/' + this.radio + '/' + this.currentPage)
      },
      /*分页跳转至*/
      skip() {
        let digit = /^\d+$/;
        if (digit.test(this.value)) {
          this.currentPage = Number(this.value);
          this.dataGet(this.$com.ZRUrl + '/wanfang_mdm/getWanfangId/' + this.radio + '/' + this.currentPage)
        }
      },
      /*获取每个ID*/
      wanfangId(Id, index, Page) {
        this.loading1 = true;
        this.backgroundColor = index;
        this.wfId = Id;
        this.$axios({
          method: 'GET',
          url: this.$com.ZRUrl + '/wanfang_mdm/UpdateHcoIdById/' + Id + '/' + 0 + '/' + Page,
        }).then((res) => {
          if (res.status == 200) {
            this.tableData = res.data.result;
            this.doctorAll = res.data.result[0].page;
            this.loading1 = false;
          }
        })
      },
      /*编辑*/
      handleEdit(index, row) {
        this.hospital = row.hospitalName;
      },
      /*医生分页*/
      doctorPage(data) {
        this.doctorPaging = data;
        this.wanfangId(this.wfId, this.backgroundColor, this.doctorPaging)
      },
      /*数据Get*/
      dataGet(Url) {
        this.loading = true;
        this.$axios({
          method: 'GET',
          url: Url,
        }).then((res) => {
          if (res.status == 200) {
            this.wfData.wfId = res.data.result.data;
            this.wfData.page = res.data.result.page_count;
            this.loading = false;
          }
        })
      },
      /*搜索*/
      search() {
        if (this.select_word) {
          this.dataPost(this.$com.Url + '/huimei/hco/selectDim', this.select_word)
        }
      },
      /*回填*/
      backfill() {
        if (this.select_word) {
          let obj = {
            hcoId: this.select_word,
            hcoName: this.hospital
          };
          this.Post(this.$com.ZRUrl + '/wanfang_mdm/insertHcoId', obj)
        }
      },
      /*确认*/
      affirm(index, row) {
        let obj = {
          hcoId: row.hospitalUid,
          hcoName: this.hospital
        };
        this.Post(this.$com.ZRUrl + '/wanfang_mdm/insertHcoId', obj)
      },
      /*回填、确认*/
      Post(Url, data) {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          url: Url,
          data: JSON.stringify(data),
        }).then((res) => {
          if (res.data.status == "success") {
            this.$message.success('修改成功了!');
          } else {
            this.$message.error('修改错误了哦！');
          }
        })
      },
      /*全部完成*/
      accomplish() {
        if (this.wfId) {
          this.$axios({
            method: 'GET',
            url: this.$com.ZRUrl + '/wanfang_mdm/affirm/' + this.wfId,
          }).then((res) => {
            if (res.data.status == "success") {
              this.$message.success('修改成功了!');
            } else {
              this.$message.error('修改错误了哦！');
            }
          })
        }
      },
      /*数据Post*/
      dataPost(Url, data) {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          url: Url,
          data: data,
        }).then((res) => {
          if (res.data.code == 200) {
            this.tableData1 = res.data.data
          }
        })
      },
    },
  }
</script>

<style scoped>
  .container {
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
  }

  .container .label {
    display: inline-block;
    padding-right: 10px;
    padding-bottom: 10px;
    cursor: pointer;
  }

  .container .label .tag {
    height: 30px;
    padding: 8px 16px;
    line-height: 14px;
  }

  .totalPages {
    display: inline-block;
    padding-top: 3px;
    padding-left: 5px;
  }

  .totalPages .input {
    width: 90px;
  }

  .active {
    background-color: rgba(103, 194, 58, .1);
    border-color: rgba(103, 194, 58, .2);
    color: #67c23a;
  }

  .fillUpId {
    margin-top: 20px;
  }

  .hospitalClass {
    font-weight: bold;
    font-size: 15px;
    display: inline-block;
  }

  .handle {
    display: inline-block;
  }

  .handle-input {
    width: 300px;
    margin-left: 50px;
  }
</style>
